<!DOCTYPE html>

<html lang="ch" xmlns:th="https://www.thymeleaf.org/">
  <head>
    <meta charset="utf-8" >
    <title>Edu Science</title>
  
    <meta http-equiv="X-UA-7Compatible" content="IE=edge">
    <meta name="description" content="Construction Html5 Template">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    
    <!-- theme meta -->
    <meta name="theme-name" content="educenter" />
  
    <!-- ** Plugins Needed for the Project ** -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/plugins/bootstrap/bootstrap.min.css">
    <!--
      Slick是一个响应式的、触摸友好的jQuery滑块插件，常用于创建轮播图、图片展示等
    -->
    <link rel="stylesheet" href="/static/plugins/slick/slick.css">
    <!-- 
      引入了Themify Icons的样式表。Themify Icons是一个包含大量矢量图标的图标库，可用于网页设计和开发
     -->
    <link rel="stylesheet" href="/static/plugins/themify-icons/themify-icons.css">
    <!-- 
      引入了Animation CSS的样式表。这个库提供了一系列的CSS动画类，可以很容易地添加到HTML元素中，实现各种动画效果
     -->
    <link rel="stylesheet" href="/static/plugins/animate/animate.css">
    <!-- 
      引入了AOS（Animate on Scroll）的样式表。AOS是一个JavaScript库，它可以在元素滚动到视口时触发动画效果
     -->
    <link rel="stylesheet" href="/static/plugins/aos/aos.css">
    <!-- 
      引入了Venobox Popup的的样式表。Venobox是一个用于创建模态框（modal boxes）或弹出窗口（popups）的JavaScript插件，常用于图片展示、视频播放或表单提交等场景
     -->
    <link rel="stylesheet" href="/static/plugins/venobox/venobox.css">
  
    <!-- Main Stylesheet -->
    <link href="/static/css/style.css" rel="stylesheet">
  
    <!--Favicon-->
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
  
  </head>
<body>
<!-- header -->
<header class="fixed-top header">
  <!-- top header -->
  <div class="top-header py-2 bg-white">
    <div class="container">
      <div class="row no-gutters">
        <div class="col-lg-4 text-center text-lg-left">
          
          <ul class="list-inline d-inline">
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-github"></i></a></li>
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-layout-placeholder"></i></a></li>
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-linux"></i></a></li>
          </ul>
        </div>
        <div class="col-lg-8 text-center text-lg-right">
          <ul class="list-inline">
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/notice.html">通知</a></li>
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/#loginModal" data-toggle="modal" data-target="#loginModal">登录</a></li>
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/#signupModal" data-toggle="modal" data-target="#signupModal">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- navbar -->
  <div class="navigation w-100">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-dark p-0">
        <a class="navbar-brand" href="/static/index.html"><img src="/static/images/logo.png" alt="logo"></a>
        <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
          aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navigation">
          <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
              <a class="nav-link" href="/static/index.html">主页</a>
            </li>
            <li class="nav-item @@courses">
              <a class="nav-link" href="/static/courses.html">课程</a>
            </li>
            <li class="nav-item @@events">
              <a class="nav-link" href="/static/events.html">活动</a>
            </li>
            <li class="nav-item @@blog">
              <a class="nav-link" href="/static/blog.html">资料</a>
            </li>
            <li class="nav-item @@teacher">
              <a class="nav-link" href="/static/teacher.html">老师</a>
            </li>
            <li class="nav-item @@about">
              <a class="nav-link" href="/static/about.html">关于</a>
            </li>
            <li class="nav-item @@contact">
              <a class="nav-link" href="/static/contact.html">联系</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>
<!-- /header -->
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-0 border-0 p-4">
            <div class="modal-header border-0">
                <h3>Register</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="login">
                    <form action="/index.html" class="row">
                        <div class="col-12">
                            <input type="text" class="form-control mb-3" id="signupPhone" name="signupPhone" placeholder="Phone" required>
                        </div>
                        <div class="col-12">
                            <input type="text" class="form-control mb-3" id="signupName" name="signupName" placeholder="Name" required>
                        </div>
                        <div class="col-12">
                            <input type="email" class="form-control mb-3" id="signupEmail" name="signupEmail" placeholder="Email" required>
                        </div>
                        <div class="col-12">
                            <input type="password" class="form-control mb-3" id="signupPassword" name="signupPassword" placeholder="Password" required>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">SIGN UP</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-0 border-0 p-4">
            <div class="modal-header border-0">
                <h3>Login</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/index.html" class="row">
                    <div class="col-12">
                        <input type="text" class="form-control mb-3" id="loginPhone" name="loginPhone" placeholder="Phone">
                    </div>
                    <div class="col-12">
                        <input type="text" class="form-control mb-3" id="loginName" name="loginName" placeholder="Name">
                    </div>
                    <div class="col-12">
                        <input type="password" class="form-control mb-3" id="loginPassword" name="loginPassword" placeholder="Password">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">LOGIN</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- hero slider -->
<section class="hero-section overlay bg-cover" data-background="images/banner/banner-1.jpg">
</section>
<!-- /hero slider -->

<!-- banner-feature -->
<section class="bg-gray overflow-md-hidden">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <div class="col-xl-4 col-lg-5 align-self-end">
        <img class="img-fluid w-100" src="/static/images/banner/banner-feature.png" alt="banner-feature">
      </div>
      <div class="col-xl-8 col-lg-7">
        <div class="row feature-blocks bg-gray justify-content-between">
          <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
            <i class="ti-book mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
            <h3 class="mb-xl-4 mb-lg-3 mb-4">书籍资料</h3>
            <p class="content">汇集各类学科的经典著作、前沿研究以及适合不同年龄段的科普读物。无论你是对自然科学充满好奇的小学生，还是正在攻读博士学位的研究生，都能在这里找到适合自己的书籍资源。
            </p>
          </div>
          <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
            <i class="ti-blackboard mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
            <h3 class="mb-xl-4 mb-lg-3 mb-4">迭代通告</h3>
            <p class="content">实时发布关于本平台的重要公告、功能更新、活动通知等内容。无论是新上线的课程资料、调整的学习计划，还是即将开展的线上活动，用户都能在这里第一时间获取到相关信息。
            </p>
          </div>
          <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
            <i class="ti-agenda mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
            <h3 class="mb-xl-4 mb-lg-3 mb-4">重大事件</h3>
            <p class="content">实时更新和展示国内教育领域的最新动态，包括政策调整、教育改革、学术研讨会等重大事件。同时，我们还将重点关注各类考试信息，包括考试时间、报名方式、考试内容等，帮助用户及时了解并做好准备
            </p>
          </div>
          <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
            <i class="ti-write mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
            <h3 class="mb-xl-4 mb-lg-3 mb-4">课程学习</h3>
            <p class="content">汇集了大量的课程学习视频，既有针对初学者的入门课程，也有适合高水平学习者的专业讲座。特别关注当前的教育热点和前沿技术，定期更新和增加新的视频内容，掌握最新的学术动态。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /banner-feature -->

<!-- courses -->
<section class="section-sm">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="d-flex align-items-center section-title justify-content-between">
          <h2 class="mb-0 text-nowrap mr-3">相关课程</h2>
          <div class="border-top w-100 border-primary d-none d-sm-block"></div>
          <div>
            <a href="/static/courses.html" class="btn btn-sm btn-outline-primary ml-sm-3 d-none d-sm-block">更多</a>
          </div>
        </div>
      </div>
    </div>
    <!-- course list -->
    <div class="row filtr-container">
      <div  th:each="course,t : ${courseList}" >
        <!-- course item -->
        <span class="cid" th:text="${course.getId()}" style="display: none"></span>
        <span class="ccount" th:text="${t.size}" style="display: none"></span>

        <div data-category="all" class="col-lg-4 col-sm-6 mb-5 filtr-item teacherCard">
          <div class="card border-0 rounded-0 hover-shadow">
            <img class="card-img-top rounded-0" th:src="${course.getPhoto()}" alt="course thumb"
                 style="width: 100%; height: 214px;">
            <div class="card-body" style="height: 150px; text-align: center;">
              <ul class="list-inline mb-2">
                <li class="list-inline-item" th:text="${course.getPublishTime()}">
                  <i class="ti-calendar mr-1 text-color"></i>02-14-2018
                </li>
                <li class="list-inline-item" >
                  <div th:switch="${course.getClassType()}">
                    <span th:case="1">物理</span>
                    <span th:case="2">化学</span>
                    <span th:case="3">数学</span>
                    <span th:case="4">地球科学</span>
                    <span th:case="5">生物</span>
                    <span th:case="*">未知课程</span> <!-- * 表示默认情况，当其他情况都不匹配时 -->
                  </div>
                </li>
              </ul>
              <a href="course-single.html" class="cbId">
                <h4 class="card-title" th:text="${course.getCourseTitle()}">Photography</h4>
              </a>
              <a href="/single.html" class="btn btn-primary btn-sm caId">查看详情</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var ccountData = document.getElementsByClassName('ccount');
      var cidData = document.getElementsByClassName('cid');
      var caIdData = document.getElementsByClassName('caId');
      var cbIdData = document.getElementsByClassName('cbId');
      for (var i = 0; i < ccountData[0].textContent; i++) {
        caIdData[i].setAttribute("href", "/course/single/"+cidData[i].textContent);
        cbIdData[i].setAttribute("href", "/course/single/"+cidData[i].textContent);
      }
    </script>
    <!-- mobile see all button -->
    <div class="row">
      <div class="col-12 text-center">
        <a href="/static/courses.html" class="btn btn-sm btn-outline-primary d-sm-none d-inline-block">sell all</a>
      </div>
    </div>
  </div>
</section>
<!-- /courses -->

<!-- events -->
<section class="section bg-gray">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="d-flex align-items-center section-title justify-content-between">
          <h2 class="mb-0 text-nowrap mr-3">活动栏目</h2>
          <div class="border-top w-100 border-primary d-none d-sm-block"></div>
          <div>
            <a href="/static/events.html" class="btn btn-sm btn-outline-primary ml-sm-3 d-none d-sm-block">更多</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <!-- event -->
      <div class="col-lg-4 col-sm-6 mb-5" th:each=" activity, t : ${activityList}">

        <span class="id" th:text="${activity.getId()}" style="display: none"></span>
        <span class="count" th:text="${t.size}" style="display: none"></span>

        <div class="card border-0 rounded-0 hover-shadow">
          <div class="card-img position-relative">
            <img class="card-img-top rounded-0" th:src="${activity.getPhoto()}" alt="event thumb"
                 style="width: 100%; height: 300px">
            <div class="card-date"><span th:text="${activity.getDate()}">18</span></div>
          </div>
          <div class="card-body">
            <!-- location -->
            <p th:text="${activity.getPlace()}"><i class="ti-location-pin text-primary mr-2"></i>Dhanmondi Lake, Dhaka</p>
            <a href="event-single.html" class="aId">
              <h4 class="card-title" th:text="${activity.getIntroduction()}">Lorem ipsum dolor amet, consectetur adipisicing.</h4>
            </a>
          </div>
        </div>

        <script>
          var countData = document.getElementsByClassName('count');
          var idData = document.getElementsByClassName('id');
          var aIdData = document.getElementsByClassName('aId');
          for (var i = 0; i < countData[0].textContent; i++) {
            aIdData[i].setAttribute("href", "/events/single/"+idData[i].textContent);
          }
        </script>
      </div>
</div>
    <!-- mobile see all button -->
    <div class="row">
      <div class="col-12 text-center">
        <a href="/static/course.html" class="btn btn-sm btn-outline-primary d-sm-none d-inline-block">sell all</a>
      </div>
    </div>
  </div>
</section>
<!-- /events -->

<!-- teachers -->
<section class="section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12">
        <h2 class="section-title">老师栏目</h2>
      </div>
      <!-- teacher -->
      <div th:each="teacher, t : ${teacherList}">
        <span class="tid" th:text="${teacher.getId()}" style="display: none"></span>
        <span class="tcount" th:text="${t.size}" style="display: none"></span>
        <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
          <div class="card border-0 rounded-0 hover-shadow" style="width: 350px;">
            <img class="card-img-top rounded-0" th:src="${teacher.getPhoto()}" alt="teacher"
            style="width: 350px; height: 395px">
            <div class="card-body">
              <a href="/static/teacher-single.html" class="taId">
                <h4 class="card-title" th:text="${teacher.getName()}">Jacke Masito</h4>
              </a>
              <p>Teacher</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var tcountData = document.getElementsByClassName('tcount');
      var tidData = document.getElementsByClassName('tid');
      var taIdData = document.getElementsByClassName('taId');
      for (var i = 0; i < tcountData[0].textContent; i++) {
        taIdData[i].setAttribute("href", "/teacher/single/"+tidData[i].textContent);
      }
    </script>
  </div>
</section>
<!-- /teachers -->

<!-- blog -->
<section class="section pt-0">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-title">资料栏目</h2>
      </div>
    </div>
    <div class="row justify-content-center">
  <!-- blog post -->
  <article class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
    <div class="card rounded-0 border-bottom border-primary border-top-0 border-left-0 border-right-0 hover-shadow">
      <img class="card-img-top rounded-0" src="/static/images/blog/post-1.jpg" alt="Post thumb">
      <div class="card-body">
        <!-- post meta -->
        <ul class="list-inline mb-3">
          <!-- post date -->
          <li class="list-inline-item mr-3 ml-0">August 28, 2018</li>
          <!-- author -->
          <li class="list-inline-item mr-3 ml-0">By Somrat Sorkar</li>
        </ul>
        <a href="/static/blog-single.html">
          <h4 class="card-title">Lorem ipsum dolor amet, adipisicing eiusmod tempor.</h4>
        </a>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicin</p>
        <a href="/static/blog-single.html" class="btn btn-primary btn-sm">read more</a>
      </div>
    </div>
  </article>
  <!-- blog post -->
  <article class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
    <div class="card rounded-0 border-bottom border-primary border-top-0 border-left-0 border-right-0 hover-shadow">
      <img class="card-img-top rounded-0" src="/static/images/blog/post-2.jpg" alt="Post thumb">
      <div class="card-body">
        <!-- post meta -->
        <ul class="list-inline mb-3">
          <!-- post date -->
          <li class="list-inline-item mr-3 ml-0">August 13, 2018</li>
          <!-- author -->
          <li class="list-inline-item mr-3 ml-0">By Jonathon Drew</li>
        </ul>
        <a href="/static/blog-single.html">
          <h4 class="card-title">Lorem ipsum dolor amet, adipisicing eiusmod tempor.</h4>
        </a>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicin</p>
        <a href="/static/blog-single.html" class="btn btn-primary btn-sm">read more</a>
      </div>
    </div>
  </article>
  <!-- blog post -->
  <article class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
    <div class="card rounded-0 border-bottom border-primary border-top-0 border-left-0 border-right-0 hover-shadow">
      <img class="card-img-top rounded-0" src="/static/images/blog/post-3.jpg" alt="Post thumb">
      <div class="card-body">
        <!-- post meta -->
        <ul class="list-inline mb-3">
          <!-- post date -->
          <li class="list-inline-item mr-3 ml-0">August 24, 2018</li>
          <!-- author -->
          <li class="list-inline-item mr-3 ml-0">By Alex Pitt</li>
        </ul>
        <a href="/static/blog-single.html">
          <h4 class="card-title">Lorem ipsum dolor amet, adipisicing eiusmod tempor.</h4>
        </a>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicin</p>
        <a href="/static/blog-single.html" class="btn btn-primary btn-sm">read more</a>
      </div>
    </div>
  </article>
</div>
  </div>
</section>
<!-- /blog -->

<!-- about us -->
<section class="section" style=" padding-bottom: 113px; ">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 order-2 order-md-1">
        <h2 class="section-title">关于 EduScience</h2>
        <p class="content">EduScience，这个充满活力的在线平台，致力于为广大用户提供一个便捷、丰富的科学知识获取渠道。无论您是科学爱好者、学生还是教育工作者，EduScience都能满足您对科学知识的渴求。</p>
        <p class="content">在这个信息爆炸的时代，EduScience为您提供了一个精选、专业的科学知识宝库。让我们一起踏上这段奇妙的科学之旅，探索未知，启迪智慧，共同书写科学的辉煌篇章！</p>
        <a href="/static/about.html" class="btn btn-outline-primary">查看更多</a>
      </div>
      <div class="col-md-6 order-1 order-md-2 mb-4 mb-md-0">
        <img class="img-fluid w-100" src="/static/images/about/about-us.jpg" alt="about image">
      </div>
    </div>
  </div>
</section >
<!-- /about us -->

<!-- footer -->
<footer>
  <!-- footer content -->
  <div class="footer bg-footer section border-bottom">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-sm-8 mb-5 mb-lg-0" style="
        font-size: 175px;
    ">
          <!-- logo -->
          <a class="logo-footer" href="/static/index.html"><img class="img-fluid mb-4" src="/static/images/logo.png" alt="logo"></a>
          <ul class="list-unstyled">
          </ul>
        </div>
        <!-- company -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">相关系统</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/about.html">关于我们</a></li>
            <li class="mb-3"><a class="text-color" href="/static/teacher.html">关于老师</a></li>
            <li class="mb-3"><a class="text-color" href="/static/courses.html">关于课程</a></li>
            <li class="mb-3"><a class="text-color" href="/static/events.html">关于活动</a></li>
            <li class="mb-3"><a class="text-color" href="/static/blog.html">关于资料</a></li>
          </ul>
        </div>
        <!-- links -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">相关链接</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/courses.html">系统通告</a></li>
            <li class="mb-3"><a class="text-color" href="/static/courses.html">系统通告</a></li>
            <li class="mb-3"><a class="text-color" href="/static/courses.html">系统通告</a></li>
            <li class="mb-3"><a class="text-color" href="/static/courses.html">系统通告</a></li>
          </ul>
        </div>
        <!-- support -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">相关推荐</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/https://book.sciencereading.cn/shop/main/Login/shopFrame.do">科学文库</a></li>
            <li class="mb-3"><a class="text-color" href="/static/https://xmsoushu.com/?ref=itotii#/">熊猫搜书</a></li>
            <li class="mb-3"><a class="text-color" href="/static/https://search.bilibili.com/all">哔哩哔哩</a></li>
            <li class="mb-3"><a class="text-color" href="/static/https://www.cctv.com/index.shtml">央视网</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- /footer -->

<!-- jQuery -->
<script src="/static/plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/static/plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="/static/plugins/slick/slick.min.js"></script>
<!-- aos -->
<script src="/static/plugins/aos/aos.js"></script>
<!-- venobox popup -->
<script src="/static/plugins/venobox/venobox.min.js"></script>
<!-- filter -->
<script src="/static/plugins/filterizr/jquery.filterizr.min.js"></script>
<!-- Main Script -->
<script src="/static/js/script.js"></script>

</body>
</html>
